<template>
    <div>
<h3>房型列表</h3>
<div>
    名称:<input type="text" v-model="a.name" />
    大小:<input type="text" v-model="a.area" />
    <input type="button" value="查询" @click="getlist">
</div>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>房号</td>
            <td>房型名称</td>
            <td>图片</td>
            <td>面积</td>
            <td>是否投放</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
            <td>{{item.Id}}</td>
            <td>{{item.Name}}</td>
            <td><img :src="item.Photo" width="100" ></td>
            <td>{{item.Area}}</td>
            <td>{{item.State==1?"是":"否"}}</td>
            <td><input type="button" value="删除" @click="del(item.Id)"></td>
        </tr>
    </tbody>
</table>
    </div>
    <div>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(a.pageYe-1)">
        <input type="button" value="下一页" @click="gopage(a.pageYe+1)">
        <input type="button" value="尾页" @click="gopage(data.zongYe)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

onMounted(()=>{
    show();
})

let a:any=reactive({
    pageYe:1,
    pageHang:2,
    name:'',
    area:''
})

let data:any=reactive({
    list:[],
    zongHang:'',
    zongYe:''
})

const del:any=(id:any)=>{
let f=confirm("确认删除");
if(f){
    axios({
        url:'/api/House/Del',
        method:'delete',
        params:{id:id}
    })
    .then((res) => {
            if (res.data > 0) {
                alert("删除成功");
                show();
            }
        })
}
}

const getlist:any=()=>{
    a.pageYe=1;
    show();
}

const gopage:any=(num:any)=>{
    if(num<1){
        a.pageYe=1
        return;
    }
    if(num>data.pageYe){
        a.pageYe=data.pageYe
        return;
    }
    a.pageYe=num;
    show();
}

const show:any=()=>{
axios({
    url:'/api/House/Show',
    method:'get',
    params:a
})
.then((res)=>{
    data.list=res.data.list
    data.zongHang=res.data.zongHang
    data.zongYe=res.data.zongYe
})

}






</script>

<style scoped>

</style>